package top.mcwebsite.playandroid.business.gongzhonghao.impl.ui

import androidx.compose.foundation.ExperimentalFoundationApi
import androidx.compose.foundation.clickable
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.BoxWithConstraints
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.layout.height
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.layout.width
import androidx.compose.foundation.pager.HorizontalPager
import androidx.compose.foundation.pager.rememberPagerState
import androidx.compose.material3.LocalContentColor
import androidx.compose.material3.MaterialTheme
import androidx.compose.material3.Text
import androidx.compose.runtime.Composable
import androidx.compose.runtime.LaunchedEffect
import androidx.compose.runtime.snapshotFlow
import androidx.compose.ui.Modifier
import androidx.compose.ui.unit.dp
import androidx.paging.PagingData
import androidx.paging.compose.LazyPagingItems
import androidx.paging.compose.collectAsLazyPagingItems
import kotlin.math.roundToInt
import kotlinx.coroutines.flow.Flow
import top.mcwebsite.playandroid.business.articles.api.model.ArticleModel
import top.mcwebsite.playandroid.business.gongzhonghao.impl.model.ChapterModel
import top.mcwebsite.playandroid.business.gongzhonghao.impl.vm.GongZhongHaoIntent
import top.mcwebsite.playandroid.business.gongzhonghao.impl.vm.GongZhongHaoViewModel
import top.mcwebsite.playandroid.common.uiWidget.SkeletonPage
import top.mcwebsite.playandroid.common.uiWidget.skeleton
import top.mcwebsite.playandroid.lib.mvi.model.Async

@OptIn(ExperimentalFoundationApi::class)
@Composable
fun GongZhongHaoContent(
    selected: Int,
    gongZhongHaoItems: Async<List<ChapterModel>>,
    getPagerFlow: (Int) -> Flow<PagingData<ArticleModel>>,
    sendIntent: (GongZhongHaoIntent) -> Unit,
) {
    when (gongZhongHaoItems) {
        is Async.Success -> {
            val pagerState = rememberPagerState(0) {
                gongZhongHaoItems.data.size
            }
            LaunchedEffect(key1 = selected) {
                pagerState.scrollToPage(selected)
            }
            LaunchedEffect(Unit) {
                snapshotFlow {
                    pagerState.currentPage
                }.collect { curPage ->
                    sendIntent(GongZhongHaoIntent.PageScrollChangedIntent(curPage))
                }
            }
            HorizontalPager(state = pagerState) {
                GongZhongHaoItemContent(
                    lazyPagingItems = getPagerFlow(it).collectAsLazyPagingItems(),
                    sendIntent = sendIntent
                )
            }
        }

        is Async.Loading -> {
            SkeletonPage {
                SkeletonUI()
            }
        }

        else -> {

        }
    }
}

@Composable
fun SkeletonUI() {
    Column(
        modifier = Modifier
            .fillMaxWidth()
            .padding(vertical = 10.dp, horizontal = 12.dp)
    ) {
        Box(
            modifier = Modifier
                .fillMaxWidth()
                .height(28.dp)
                .padding(vertical = 1.dp)
                .skeleton(true)
        )
        Box(
            modifier = Modifier
                .width(60.dp)
                .height(12.dp)
                .padding(vertical = 1.dp)
                .skeleton(true)
        )
    }
}

